<style lang="scss">
.PageData {
  .PageData_header {
    width: 1200px;
    margin: 30px auto;
    img {
      width: 180px;
      padding-right: 30px;
    }
  }
  .PageHeader {
    display: flex;
  }
  .page_introduction {
    width: 1200px;
    margin: 30px auto;
  }
  .PageData_ul_con {
    width: 1200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    margin: 20px auto;
    box-shadow: 0 1px 2px #ccc;
    li {
      margin: 20px 20px;
      width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
<template>
  <div class="PageData">
    <Homeview></Homeview>
    <header class="PageData_header">
      <h5>
        <router-link to="/">首页</router-link>/&emsp; <span>{{ PageData.articlename }}</span>
      </h5>
      <div class="PageHeader">
        <img :src="PageData.Pagetotal_img" alt="亲，图片加载失败哦~" />
        <div>
          <h5>{{ PageData.articlename }}</h5>
          <p>最近更新：<span></span> <span></span></p>
        </div>
      </div>
    </header>
    <aside class="page_introduction">
      <h4>作品简介</h4>
      <hr />
      <p>{{ PageData.intro }}</p>
    </aside>
    <ul class="PageData_ul_con">
      <li
        @click="PageNovel_content(item.id)"
        v-for="item in PageData.Pagetotal"
        :key="item.id"
        :data-id="item.id"
      >
        <router-link :to="`/novel_con/${item.id}`">
          {{ item.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { get_books_total } from '../axios/modules/get'
import { ref, reactive, onMounted } from 'vue'
const router = useRouter()
// 导入组件
import Homeview from '../components/Home.vue'

// 定义变量
const PageData = reactive({
  Pagetotal: '',
  Pagetotal_img: '',
  articlename: '',
  intro: ''
})
const route = useRoute()

// console.log(route.params.id, 'idfb')

get_books_total({ id: route.params.id }).then((res) => {
  console.log(res)

  PageData.Pagetotal = res.data.chapters
  PageData.Pagetotal_img = res.data.url_img
  PageData.articlename = res.data.articlename
  PageData.intro = res.data.intro
})
</script>
